<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useLocation } from '@/hooks/web/useLocation'
	import { getListApi } from '@/package_tms/api/Home'
	const { getLocation } = useLocation()
	const useStore = () => {
		const location = ref({
			lat: 0,
			lon: 0
		})
		const markers = ref([])
		const getList = async () => {
			const location_res = await getLocation({ type: 'gcj02' })

			const params = {
				lon: location_res.longitude, // 经度
				lat: location_res.latitude, // 纬度
			}

			location.value = params
			const storedData = uni.getStorageSync('storeList');
			const dataList = JSON.parse(storedData);
			// const res = await getListApi(params)
			markers.value = dataList.map((item) => {
				// const iconPath = item.status === 2 ? '/package_tms/static/icon/location_pending.png' : '/package_tms/static/icon/location_fullfilled.png'
				return {
					id: item.store_id,
					longitude: Number(item.lon),
					latitude: Number(item.lat),
					width: 30,
					height: 30,
					iconPath: '/package_tms/static/icon/location_pending.png',
					callout: {
						content: item.store,
						display: 'ALWAYS',
						color: '#000000',
						fontSize: 16
					}
				}
			})
		}
		return {
			getList,
			location,
			markers
		}
	}
	const { getList, location, markers } = useStore()
	onLoad(() => {
		getList()
	})
</script>

<template>
	<up-navbar title="送货地图" autoBack border placeholder></up-navbar>
	<map style="width: 100%; height: 100vh;" :latitude="location.lat" :longitude="location.lon"
		:markers="markers"></map>
</template>

<style>
</style>